<template>
  <div class="light-ripple-bg">
    <canvas ref="canvasRef" @click="addRipple"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  const ripples = []

  class Ripple {
    constructor(x, y) {
      this.x = x
      this.y = y
      this.radius = 0
      this.maxRadius = 300
      this.speed = 3
      this.opacity = 1
      this.color = `hsl(${Math.random() * 360}, 70%, 60%)`
    }

    update() {
      this.radius += this.speed
      this.opacity = 1 - (this.radius / this.maxRadius)
      return this.radius < this.maxRadius
    }

    draw() {
      ctx.strokeStyle = this.color
      ctx.globalAlpha = this.opacity
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
      ctx.stroke()
      
      // 内圈
      ctx.lineWidth = 2
      ctx.globalAlpha = this.opacity * 0.5
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.radius * 0.7, 0, Math.PI * 2)
      ctx.stroke()
      
      ctx.globalAlpha = 1
    }
  }

  const addRipple = (event) => {
    const rect = canvas.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    ripples.push(new Ripple(x, y))
  }

  // 自动添加涟漪
  const autoAddRipple = () => {
    const x = Math.random() * canvas.width
    const y = Math.random() * canvas.height
    ripples.push(new Ripple(x, y))
  }

  setInterval(autoAddRipple, 800)

  const animate = () => {
    ctx.fillStyle = 'rgba(10, 10, 30, 0.15)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    for (let i = ripples.length - 1; i >= 0; i--) {
      if (!ripples[i].update()) {
        ripples.splice(i, 1)
      } else {
        ripples[i].draw()
      }
    }

    animationId = requestAnimationFrame(animate)
  }

  animate()

  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }

  window.addEventListener('resize', handleResize)
  canvas.addEventListener('click', addRipple)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    canvas.removeEventListener('click', addRipple)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.light-ripple-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a1e 0%, #1a1a3e 100%);
  cursor: pointer;
}

canvas {
  display: block;
}
</style>

